<template>
  <el-form class="text-line-box" :label-width="`${labelWidth}px`">
    <el-form-item v-for="item in dataArr" :key="item.title" :label="`${item.title}：`">
      <span class="text">{{ item.text }}</span>
    </el-form-item>
  </el-form>
</template>

<script lang="ts">
  import { Vue, Component, Prop } from 'vue-property-decorator'
  import { TextItem } from './types'

  @Component({
    name: 'TextLine',
    components: {}
  })
  export default class TextLine extends Vue{

    @Prop(Array) dataArr!: Array<TextItem>
    @Prop({ type: Number, default: 80 }) labelWidth!: number
  }

</script>

<style lang="scss">
.text-line-box {
  .el-form-item {
    margin-bottom: 0px;
  }
  .el-form-item__label {
    font-weight: bold;
  }
  .text {
    color: #999;
  }
}
</style>
